<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo: -webkit-filter</title>
	<link rel="shortcut icon" type="image/x-icon" href="http://flyxiang.org/www/img/favicon.ico">
	<link rel="apple-touch-icon" href="http://flyxiang.org/www/img/flyxiang_57.png">
	<link rel="apple-touch-icon" sizes="72x72" href="http://flyxiang.org/www/img/flyxiang_72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="http://flyxiang.org/www/img/flyxiang_114.png">
	<link href="../www/css/basic.css" rel="stylesheet" media="all" >
	<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<style>
    body {
    font-family: 'Oswald',sans-serif;
    color:#333;
    background:#EDEDED;
    -webkit-text-size-adjust: none;
}
/*Custom text-selection colors*/
::-moz-selection {background: #F04530; color: #fff; text-shadow: none;}
::selection {background: #F04530; color: #fff; text-shadow: none;} 
a {
    color:#346AA8;
    text-decoration:none;
}

a:hover,
a:focus,
a:active {
    text-decoration:none;
}
h1 {
    text-align: center;
	font-family: 'Oswald',sans-serif;
}
h1 a {
    font-size: 30px;
    font-weight: 400;
    text-decoration: none;
    color: #5FA4A0
}
h1 a:hover {
    color: #5FA4A0
}
#f h1{
	text-align:center;
	padding:10px 0 0;
}
#f-w {
	width: 848px;
	overflow: hidden;
	margin: 0 auto;
}
.f-c{
	width: 848px
}
.img-items{
	float:left;
	padding:0 6px;
}
.img-items h2{
	font-size:12px;
	color:#666;
	padding:10px 0;
}
img{
	border-radius:10px;
}
.blur{
	-webkit-filter:blur(2px);
}
.hue{
	-webkit-filter:hue-rotate(180deg);
}
.grayscale{
	-webkit-filter:grayscale(1);
}
.sepia{
	-webkit-filter:sepia(.5);
}
.saturate{
	-webkit-filter:saturate(.5);
}
.invert{
	-webkit-filter:invert(1);
}
.opacity{
	-webkit-filter:opacity(.5);
}
.brightness{
	-webkit-filter:brightness(.5);
}
.contrast{
	-webkit-filter:contrast(.5);
}
.w-f{
	padding:0 0 0 10px;
}
#f-f{
	padding:10px 0;
}
</style>
</head>
<body>
<div id="f">
<h1><a href="http://www.flyxiang.org">Filter Effects 1.0</a></h1>
<div id="f-w">
	<div class="f-c f-clear">
		<div class="img-items">
		<h2>blur 模糊</h2>
		<img class="blur" width="200" src="http://media-cdn.pinterest.com/upload/51861833178617899_TtIFvF4M_c.jpg" />
		</div>
		<div class="img-items">
		<h2>hue-rotate 色相旋转</h2>
		<img class="hue" width="200" src="http://media-cdn.pinterest.com/upload/51861833178617899_TtIFvF4M_c.jpg" />
		</div>
		<div class="img-items">
		<h2>grayscale 灰度</h2>
		<img class="grayscale" width="200" src="http://media-cdn.pinterest.com/upload/51861833178617899_TtIFvF4M_c.jpg" />
		</div>
		<div class="img-items">
		<h2>sepia 褐色</h2>
		<img class="sepia" width="200" src="http://media-cdn.pinterest.com/upload/51861833178617899_TtIFvF4M_c.jpg" />
		</div>
		<div class="img-items">
		<h2>saturate 饱和度</h2>
		<img class="saturate" width="200" src="http://media-cdn.pinterest.com/upload/51861833178617899_TtIFvF4M_c.jpg" />
		</div>
		<div class="img-items">
		<h2>invert 反色</h2>
		<img class="invert" width="200" src="http://media-cdn.pinterest.com/upload/51861833178617899_TtIFvF4M_c.jpg" />
		</div>
		<div class="img-items">
		<h2>opacity 透明度</h2>
		<img class="opacity" width="200" src="http://media-cdn.pinterest.com/upload/51861833178617899_TtIFvF4M_c.jpg" />
		</div>
		<div class="img-items">
		<h2>brightness 亮度</h2>
		<img class="brightness" width="200" src="http://media-cdn.pinterest.com/upload/51861833178617899_TtIFvF4M_c.jpg" />
		</div>
		<div class="img-items">
		<h2>contrast 对比度</h2>
		<img class="contrast" width="200" src="http://media-cdn.pinterest.com/upload/51861833178617899_TtIFvF4M_c.jpg" />
		</div>
	</div>
	<div class="w-f">
		from web: <a href="https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html" title="Filter Effects 1.0">Filter Effects 1.0</a>
	</div>
</div>
<footer id="f-f">&copy; <a href="http://www.flyxiang.org" title="flyxiang">flyxiang.org</a></footer>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28937623-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</div>
</body>
</html>